<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>父组件</h1>
        <head-com @send="getData"></head-com>
        <foot-com :bigbrother="hmsg"></foot-com>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 兄弟组件传值   
        // 1. 子传父  在父传子
        // 二. 使用bus传值  借助一个vue的空实例 
        //    1.一个组件去触发一个事件 $emit() 并传值
        //    2.另一个组件 监听事件的触发 $on() 并接收值 接收的数据在函数的形参中
        var $bus = new Vue({});

        var headCom = Vue.component("headCom", {
                template: `<div> <h1>头部组件:{{edata}}</h1> </div>`,
                data() {
                    return {
                        hdata: "我是大哥",
                        edata: "" //接收脚步的数据
                    }
                },
                created() {
                    this.$emit("send", this.hdata)
                    console.log(111)
                        // 先绑定好监听事件
                    $bus.$on("hello", (a) => {
                        this.edata = a;
                    })
                },
                mounted() {

                },
            })
            // 
        var footCom = Vue.component("footCom", {
            template: `<div> <h1>脚步组件 :{{bigbrother}}</h1> </div>`,
            props: ["bigbrother"],
            data() {
                return {
                    rdata: "我是二弟"
                }
            },
            created() {

            },
            mounted() {
                console.log(222)
                    // 1. 一个组件去触发一个事件 $emit() 并传值
                    // 触发绑定好的监听事件
                $bus.$emit("hello", this.rdata)
            },
        })
        var app = new Vue({
            el: "#app",
            data() {
                return {
                    hmsg: ""
                }
            },
            methods: {
                getData(a) {
                    this.hmsg = a;
                }
            },

        })
    </script>
</body>

</html>